<template>
	<view class="container">
		<view class="top">
			<view class="top-tab">
				<text @click="tabChange(1)" :class="[currentTab == 1 ? 'hb' : '']">预设课程</text>
				<text @click="tabChange(2)" :class="[currentTab == 2 ? 'hb' : '']">自设课程</text>
			</view>
			<u-gap :bg-color="bgColor" :height="height" :margin-top="marginTop" :margin-bottom="marginBottom"></u-gap>
		</view>
		<view class="middle" style="margin-top: 0upx;">
			<u-swipe-action
				:show="item.show"
				:index="index"
				v-for="(item,index) in curriculums" :key="index"
				@click="delCourse"
				@open="open"
				:options="options"
				style="width: 100%;"
				class="u-m-b-20"
			>
			<view @click="toDetail(item.id)" class="middle-sm u-m-t-20" >
				<view class="u-flex u-row-between u-m-r-22">
					<view class="u-m-l-26 u-m-t-20">
						<view class="u-font-34 sm" >
							{{item.name}}
						</view>
						<view class="gxkt u-m-t-20">
							{{item.classify}}
						</view>
					</view>
					<image class="picture"  src="../../static/img/kt.png" mode=""></image>
				</view>
				<view class="u-flex u-row-between u-m-r-22">
					<view class="u-m-l-26 u-m-t-20">
						<text class="u-font-30">{{item.duration}}</text>
						<text class="jq" >￥{{item.value}}</text>
					</view>
					<text style="color: #888D99;">{{item.direction}}</text>
				</view>
			</view>
			</u-swipe-action>
		</view>
	</view>
</template>

<script>
	export default{
		
		data(){
			return{
				options: [
					{
						text: '编辑',
						style: {
							backgroundColor: '#007aff'
						}
					},
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				],
				height: 1,
				bgColor: "#AC49D3",
				marginTop: 28,
				marginBottom: 25,
				currentTab: 1,
				type: '',
				curriculums:[],
			}
		},
		onLoad(options){
			let that = this
			if(options.type){
				that.type = options.type
			}
			if(options.kecheng){
				if(options.kecheng == "预设课程"){
					that.currentTab = 1
				}else if(options.kecheng == "自设课程"){
					that.currentTab = 2
				}
			}
			this.findCourseAll();
		},
		onNavigationBarButtonTap(val) {
		    if(val.float == 'right'){
				this.$mRouter.push({
					route:this.$mRoutesConfig.addClassroom
				})
			}
		},
	    onNavigationBarSearchInputChanged (val) {
			this.findCourseAll(val.text);
		}, 
		methods:{
			open(index) {
				this.curriculums[index].show = true
				this.curriculums.map((val, idx) => {
					if (index != idx) this.curriculums[idx].show = false
				})
			},
			delCourse(index, index1) {
				var that = this
				if(index1 == 1) {
				uni.showModal({
					content: '删除该课程',
					success(res) {
						if (res.confirm) that.deleteCourse(index)
					}
				})
				}else{
					this.$mRouter.push({
						route:this.$mRoutesConfig.addClassroom,
						query:{
							id:this.curriculums[index].id
						}
					})
				}
			},			
			async deleteCourse(index) {
				let { code } = await this.$apis.deleteCourse({ id: this.curriculums[index].id })
				if (code == 200) {
					this.curriculums.splice(index, 1)
				}
			},
			//查询所有课程
			async findCourseAll(val){
				let reqBody = {};
				reqBody['pageNum'] = 1;
				reqBody['pageSize'] = 5;
				reqBody['name'] = val;
				reqBody['types'] = this.currentTab;
				let {data} = await this.$apis.findCurrUserCourseAll(reqBody);
				this.curriculums = data
			},
			tabChange(e) {
				// console.log(e);
				// this.model.dttype = e?"gzdt":"zydt";
				this.currentTab = e;
				this.findCourseAll();
			},
			toDetail(id){
				let tab = this.currentTab;
				let type = this.currentTab;
				uni.navigateTo({
					url:"/pages/classroom/detail?id="+id+"&currentTab="+tab+"&type="+type
				})
			}
		},
		
	}
</script>

<style scoped lang="scss">
	page{
		background-color: #f4f4f4;
	}
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
	.top_view {
		height: var(--status-bar-height);
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 999;
	}
	.top{
		width: 750rpx;
		background: linear-gradient(0deg, #AB61FF, #DF61FF);
		.top-tab{
			display: flex;
			justify-content: space-around;
			padding: 10rpx 30rpx;
			
			text {
				display: block;
				width: 226rpx;
				height: 60rpx;
				line-height: 60rpx;
				color: #ffffff;
				font-size: 28rpx;
				text-align: center;
			}
			
			.hb {
				background: #AC49D3;
				border-radius: 30rpx;
				color: #FFFFFF;
				font-weight: bold;
			}
		}
		
	}
	.top-sx{
		text{
			color: #FFFFFF;
			font-size: 28rpx;
		}
		image{
			width: 25rpx;
			height: 14rpx;
			margin-left: 11rpx;
		}
	}
	.middle{
		width: 100%;
		margin-top: 80rpx;
		margin-left: 20rpx;
		.middle-sm{
			width: 710rpx;
			height: 222rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
		}
	}
	.gxkt{
		height: 42rpx;
		background: #EDF5FF;
		border-radius: 6rpx;
		color: #4B9CFF;
		font-size: 26rpx;
		text-align: center;
		line-height: 42rpx;
	}
	.sm{
		font-weight: bold;
	}
	.picture{
		width: 121rpx; 
		height: 110rpx; 
		margin-top: 25rpx;
	}
	.jq{
		font-size: 38rpx; 
		color: #FE5022; 
		font-weight: bold; 
		margin-left: 20rpx;
	}
</style>
